<template>
    <div class="wrap">
        <div class="top">
            <TopNav :isShowBack="false">
                <template #right>
                    <div class="right">
                        <OnlineStatus />
                        <UserInfo />
                        <Logout />
                    </div>
                </template>
            </TopNav>


        </div>

        <div class="container">
            <div class="menu_wrap">
                <div class="left">
                    
                    <div class="item" @click="toDesc('transferquery')">
                        <div class="title">库存调拨</div>
                        <div class="icon_wrap">
                            <SvgIcon name="menu-transfer" color="#fff" size="100" class="icon" />
                        </div>

                    </div>
                    <div class="item" @click="toDesc('checkquery')">
                        <div class="title">库存盘点</div>
                        <div class="icon_wrap">
                            <SvgIcon name="menu-check" color="#fff" size="100" class="icon" />
                        </div>
                    </div>
                </div>

                <div class="center">
                    <div class="item" @click="toDesc('shopsale')">
                        <div class="title" >店铺销售</div>
                        <div class="icon_wrap">
                            <SvgIcon name="menu-sale" color="#fff" size="180" class="icon" />
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="item"  @click="toDesc('getdata')">
                        <div class="title">数据获取</div>
                        <div class="icon_wrap">
                            <SvgIcon name="menu-getdata" color="#fff" size="100" class="icon" />
                        </div>
                    </div>

                    <div class="item"  @click="toDesc('systemconfig')">
                        <div class="title">系统设置</div>
                        <div class="icon_wrap">
                            <SvgIcon name="menu-system" color="#fff" size="100" class="icon" />
                        </div>
                    </div>
                </div>
            </div>



            <!-- :style="{backgroundColor:colorList[index]}" -->
            <!-- <div v-for="(item, index) in menuList" :key="item.id" class="item" @click="toDesc(item)">
                <div class="icon_wrap" :style="{ backgroundColor: colorList[index] }">
                    <template v-if="index <= 7">
                        <SvgIcon :name="index" color="#fff" size="80" class="icon" />
                    </template>
                    <template v-else>
                         <SvgIcon name="close"  color="#fff" size="80" class="icon" /> 

                    </template>
                </div>

                <div class="menu_name">{{ item.name }} </div>
            </div> -->
        </div>
    </div>

</template>
<script setup lang='ts'>
// @ts-nocheck
import OnlineStatus from '../components/OnlineStatus.vue'
import Logout from '../components/Logout.vue'
import { useUserStore } from '@renderer/store/user'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import TopNav from '../components/TopNav.vue'
import MinWindow from '../components/MinWindow.vue'
import { ref, Ref, onMounted } from 'vue'
import { getDateTimeString } from '../utils/index'
import { getPlanList } from '@renderer/api/index'
import { ElMessage } from 'element-plus'
//日期选择
const today = getDateTimeString(new Date().getTime())
const planDate = ref(today)
const changeDate = (param) => {
    clearInputVal()
    if (param == 'pre') {
        planDate.value = getDateTimeString(new Date(planDate.value).getTime() - 3600 * 24 * 1000)
    } else {
        planDate.value = getDateTimeString(new Date(planDate.value).getTime() + 3600 * 24 * 1000)
    }
}

//计划

interface IPlan {
    cycleID: string,
    name: string,
    planGroupID: string,
    planON: string

}
const currentPlan = ref<IPlan>({
    cycleID: '',
    name: '',
    planGroupID: '',
    planON: ''
})

function clearInputVal() {
    currentPlan.value.name = ''
}

const planList: Ref<IPlan[]> = ref([])
const dialogVisible = ref(false)
const openPlanDialog = async () => {
    try {
        await getPlanData()
    dialogVisible.value = true
    } catch (error) {
        console.log(error)
    }
   

}
const choosePlan = (item) => {
    currentPlan.value = item
    dialogVisible.value = false

}
const chooseDate = () => {
    clearInputVal()
    getPlanData()
}
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

async function getPlanData() {
    const supplierOrganizationID = userInfo.value.user_organizationId
    const sellCategory = 'M'
    console.log(planDate.value)
    const reqData = { supplierOrganizationID, planDate: planDate.value, sellCategory }
    try {
        const { data } = await getPlanList(reqData)
    planList.value = data
    } catch (error) {
        console.log(error)
    }
    
}

onMounted(() => {
    //getPlanData()
})

const menuList = ref([
    {
        id: 1,
        name: '店铺销售',
        path: 'shopsale'
    },
    {
        id: 2,
        name: '数据获取',
        path: 'getdata'
    },
    {
        id: 3,
        name: '库存调拨',
        path: 'transferquery'
    },
    {
        id: 4,
        name: '库存盘点',
        path: 'checkquery'
    },

    {
        id: 5,
        name: '系统设定',
        path: 'systemconfig'
    },
    {
        id: 6,
        name: '关闭'
    },
])
let colorList = ref([
    '#F56C6C', '#0099CC', '#FF99CC', '#CC3366', '#CCCC66', '#1989fa', '#ff976a', '#07c160', '#ee0a24'
])



const router = useRouter()
const toDesc = async (path) => {
    if (path === 'getdata') { //数据获取
        await userStore.fetchData()
        ElMessage({
            message: '数据获取成功',
            type: 'success',
        })
    } else {
        router.push({ name: path })
    }
    // if (path === 'productinstore' && !currentPlan.value.name) {
    //     ElMessage({
    //         message: '请选择计划',
    //         type: 'warning',
    //     })
    //     return
    // }

    //router.push({ name: path, query: { planDate: planDate.value, cycleID:currentPlan.value.cycleID, planGroupID:currentPlan.value.planGroupID } })

}

</script>

<style scoped lang='scss'>
.wrap {
    background-color: #f5f5f5;
    height: 100%;

    .right {
        display: flex;
        align-items: center;
    }
}


.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 50px);
}

.menu_wrap {
    flex: 1;
    height: 100%;
    max-width: 90%;
    max-height: 500px;

    display: flex;
    justify-content: space-around;

    &>div {
        flex: 1;

    }

    .left,
    .right {
        display: flex;
        flex-direction: column;
        justify-content: center;

        &>div {
            flex: 1;
        }
    }

    .center {
        margin: 0 30px;

        .item {
            flex: 1;
            height: 100%;
            background-color: #806bf6;

            .icon_wrap{
                width: 500px;
                height: 500px;
                left: -60px;
                bottom: -94px;
                .icon{
                   
                    top: 40px;
                    left: 30%;
                }

            }
        }
    }

    .left,
    .right {
        .item {
            width: 100%;

        }

        .item:nth-child(1) {
            background-color: #ff6766;
            margin-bottom: 20px;
        }

        .item:nth-child(2) {
            background-color: #fd4c76;
        }
    }

    .right {
        .item:nth-child(1) {
            background-color: #379dff;
        }

        .item:nth-child(2) {
            background-color: #fdaa1c;
        }
    }


    .item {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        .title {
            font-size: 34px;
            line-height: 1;
            padding: 20px 0 0 20px;
            color: #fff;
            letter-spacing: 2px;
        }

        .icon_wrap {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 160px;
            height: 160px;
            background-color: rgba(255, 255, 255, .2);
            border-radius: 50%;
            .icon {
                
                position: absolute;
                left: 15px;
                top: 15px;


            }
        }

    }
}
</style>
